<template>
  <div>
      <el-collapse v-model="index" v-for="(item,index) in dataList">
          <el-collapse-item :name="index">
              <template slot="title">
                  <i class="item_icon" />
                  <div style="width: 35%;font-weight: 500;color: #333333">站址编码：{{item.siteId}}</div>
                  <div style="width: 50%;font-weight: 500;color: #333333">项目编码：{{item.prjCode}}</div>
              </template>
              <div class="content-box">
                  <el-table
                      :data="item.fsuSiteEquipmentDetails"
                      border
                      style="width: 100%;"
                  >
                      <el-table-column prop="deviceName" label="设备类型" align="center" show-overflow-tooltip />
                      <el-table-column prop="deviceId" label="设备ID" align="center" show-overflow-tooltip />
                      <el-table-column prop="withinReportedTime" label="入网操作时间" align="center" show-overflow-tooltip />
                      <el-table-column prop="withinReportedValue" label="入网信号上报" align="center" show-overflow-tooltip min-width="120">
                          <template slot-scope="scope">
                              <span style="color: #c53f3f">{{scope.row.withinReportedValue}}</span>
                          </template>
                      </el-table-column>
                      <el-table-column prop="outSideReportedTime" label="此前最近一次上报时间" align="center" show-overflow-tooltip />
                      <el-table-column prop="outSideReportedValue" label="此前最近一次信号上报" align="center" show-overflow-tooltip min-width="120">
                          <template slot-scope="scope">
                              <span style="color: #c53f3f">{{scope.row.outSideReportedValue}}</span>
                          </template>
                      </el-table-column>
                      <el-table-column prop="result" label="对比结果" align="center" show-overflow-tooltip />
                  </el-table>
                  <div style="display: flex;margin-top: 10px">
                      <div style="height: 24px;line-height: 24px;width: 50px">备注：</div>
                      <el-input
                          v-model="item.remake"
                          size="mini"
                          type="textarea"
                          :rows="2"
                          :placeholder="placeholder"
                          :disabled="!showButton"
                      />
                  </div>
              </div>
          </el-collapse-item>
      </el-collapse>
      <div class="foot-btn" v-if="showButton">
          <TButton :btn-config="footerBtn" @propClick="handleClick" />
      </div>
  </div>
</template>
<script>
import TButton from "@/components/basic/TButton.vue";
import {msgInfoEl} from "@/utils";
import {getEquipmentChangeDetailsApi, updateFsuEquipmentChangeRemark} from "@/api/acceptance";

export default {
    name: 'equipmentChange',
    components: {TButton},
    props: {
        prjIds: {
            type: Array,
            default: () => [],
            require: true
        },
    },
    data(){
        return {
            dataList:[],
            footerBtn: [
                {
                    label: '下一步',
                    fun: 'doNext'
                }
            ],
            showButton:true,
            placeholder:'',
        }
    },
    created() {
        this.showButton=this.$route.query.type!=='1'
        this.placeholder=this.$route.query.type === '1' ? '':'当设备对比结果为该期间变更的设备信息无变化或该期间未查询到数据时必填'
        this.getTableData();
    },
    methods:{
        handleClick(fn) {
            this[fn]()
        },
        getTableData() {
            const params=JSON.parse(window.sessionStorage.getItem('equipmentPrjIds'))
            getEquipmentChangeDetailsApi(params).then((res)=>{
                if(+res.code === 200){
                    this.dataList=res.data;
                }
            })
        },
        getMessageStr(item,str){
            const flag = item.fsuSiteEquipmentDetails.some(subItem=>subItem.result === '该期间变更的设备信息无变化' || subItem.result === '该期间未查询到数据')
            if(flag && !item.remake){
                if(str===''){
                    str=str+item.prjCode
                }else{
                    str=str+','+item.prjCode
                }
            }
            return str;
        },
        getSaveParams(){
            let arr=[];
            this.dataList.forEach((item)=>{
                if(item.remake){
                    arr.push({
                        prjId:item.prjId,
                        remake:item.remake
                    })
                }
            })
            return arr;
        },
        doNext(){
            let str=''
            this.dataList.forEach((item)=>{
                str=this.getMessageStr(item,str)
            })
            if(str===''){
                const params=this.getSaveParams();
                updateFsuEquipmentChangeRemark(params).then((res)=>{
                    if(+res.code === 200){
                        //调保存接口
                        this.$emit('deviceDoNext')
                    }
                })

            }else{
                msgInfoEl({
                    message: '项目编码'+str+'存在该期间变更的设备信息无变化或该期间未查询到数据，请填写备注信息！',
                    type: 'error'
                })
            }

        }
    }
}
</script>
<style scoped lang='scss'>
.el-collapse {
    margin-bottom: 15px;
    border: 1px solid #EBEEF5;
}
.item_icon {
    width: 6px;
    background: rgb(235, 75, 75);
    height: 15px;
    margin-right: 10px;
    border-radius: 10px
}
.content-box {
    width: 100%;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 0;
}
::v-deep .el-collapse-item {
    box-shadow: none;
    /* 调整各个item之间的距离为20px */
    /* border: 1px; */
}
::v-deep .el-collapse-item__content{
    padding-bottom: 10px !important;
}
.foot-btn {
    margin: 15px 0;
    text-align: center;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #f7f7f7;
    color:#333333;
}
</style>
